<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS盒子模型基础示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 20px;
            color: #333;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }

        h1 {
            text-align: center;
            color: #2c3e50;
        }

        .box-section {
            margin: 40px 0;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background-color: #f5f5f5;

        }

        h2 {
            color: #34495e;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
        }

        .box-demo {
            width: 150px;
            height: 150px;
            padding: 20px;
            border: 5px solid;
            margin: 15px;
            text-align: center;
            font-weight: bold;
            display: inline-block;
            vertical-align: top;
        }

        /* 标准盒子模型 */
        .box-standard {
            box-sizing: content-box;
        }

        /* IE盒子模型 */
        .box-border {
            box-sizing: border-box;
        }

        /* 不同盒子的样式区分 */
        .box1 {
            background-color: #e3f2fd;
            border-color: #2196f3;
            color: #0d47a1;
            
        }

        .box2 {
            background-color: #e8f5e9;
            border-color: #4caf50;
            color: #1b5e20;
        }

        .box3 {
            background-color: #fff8e1;
            border-color: #ffc107;
            color: #ff8f00;
        }

        .box4 {
            background-color: #f3e5f5;
            border-color: #9c27b0;
            color: #4a148c;
        }

        .box-model-diagram {
            margin: 30px auto;
            width: 300px;
            height: 300px;
            position: relative;
        }

        .margin-area {
            position: absolute;
            top: 20px;
            left: 20px;
            right: 20px;
            bottom: 20px;
            border: 2px dashed #ff9800;
        }

        .border-area {
            position: absolute;
            top: 40px;
            left: 40px;
            right: 40px;
            bottom: 40px;
            border: 3px solid #f44336;
        }

        .padding-area {
            position: absolute;
            top: 60px;
            left: 60px;
            right: 60px;
            bottom: 60px;
            border: 2px solid #4caf50;
        }

        .content-area {
            position: absolute;
            top: 80px;
            left: 80px;
            right: 80px;
            bottom: 80px;
            background-color: #2196f3;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
        }

        .label {
            position: absolute;
            font-size: 12px;
            font-weight: bold;
        }

        .margin-label {
            color: #ff9800;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
        }

        .border-label {
            color: #f44336;
            top: 25px;
            left: 25px;
        }

        .padding-label {
            color: #4caf50;
            bottom: 40px;
            right: 40px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>CSS盒子模型讲解</h1>

        <p>CSS盒子模型是网页布局的基础，每个元素都被视为一个盒子，包含以下部分：</p>
        <ul>
            <li><strong>内容区(Content)</strong>：元素内容所在区域，由width和height控制</li>
            <li><strong>内边距(Padding)</strong>：内容区与边框之间的空间</li>
            <li><strong>边框(Border)</strong>：围绕内边距的线条</li>
            <li><strong>外边距(Margin)</strong>：盒子与其他元素之间的空间</li>
        </ul>

        <div class="box-section">
            <h2>盒子模型结构示意图</h2>
            <div class="box-model-diagram">
                <div class="margin-area"></div>
                <div class="border-area"></div>
                <div class="padding-area"></div>
                <div class="content-area">内容区<br>(content)</div>

                <span class="label margin-label">外边距 (margin)</span>
                <span class="label border-label">边框 (border)</span>
                <span class="label padding-label">内边距 (padding)</span>
            </div>
        </div>

        <div class="box-section">
            <h2>标准盒子模型 (content-box)</h2>
            <p>width和height仅应用于内容区，盒子的宽 = width + 2*(padding + border)，
            盒子的高 = height + 2*(padding + border)</p>

            <div class="box-demo box-standard box1">
                内容区<br>150×150px
            </div>

            <div class="box-demo box-standard box2">
                总尺寸:<br>200×200px<br>(含内边距和边框)
            </div>
        </div>

        <div class="box-section">
            <h2>IE盒子模型 (border-box)</h2>
            <p>width和height包含内容区+内边距+边框，总尺寸保持设置值不变</p>

            <div class="box-demo box-border box3">
                内容区<br>100×100px
            </div>

            <div class="box-demo box-border box4">
                总尺寸:<br>150×150px<br>(含内边距和边框)
            </div>
        </div>


    </div>
</body>

</html>